<template>
    <div class="container">
    <el-table :data="props.tableData" stripe >
      <el-table-column type="index" label="序号" width="80" align="center" show-overflow-tooltip />
      <el-table-column prop="name" label="模块名" width="180"  align="center" show-overflow-tooltip/>
      <el-table-column prop="desc" label="描述" width="180"  align="center" show-overflow-tooltip/>
      <el-table-column prop="create_time" label="创建时间" width="180"  align="center" show-overflow-tooltip>
        <template #default="scope">  
        <!-- 使用 moment.js 格式化时间 -->  
        {{ moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}  
      </template>
      </el-table-column>
      <el-table-column prop="update_time" label="更新时间" width="180"  align="center" show-overflow-tooltip>
        <template #default="scope">  
        <!-- 使用 moment.js 格式化时间 -->  
        {{ moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}  
      </template>
      </el-table-column>
      
      <el-table-column prop="project" label="所属项目" width="180"  align="center" show-overflow-tooltip/>
      <el-table-column label="操作" width="180" align="center" show-overflow-tooltip>
        <template #default="scope">
          <el-icon  @click="edit(scope.row.id)" style=" padding: 2px; color: blue;">
            <EditPen />
          </el-icon>
          <el-icon style="padding: 2px; color:red;" @click="deleteD(scope.row.id)">
            <Delete />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  import { Delete, EditPen } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router';
  import moment from 'moment';  
  const router = useRouter();
  
  // 接受父组件传过来的值
  // 声明 props
  const props = defineProps({
    tableData: {
      type: Array
    }
  });

  
  // defineEmits 定义了emit
  import { defineEmits } from 'vue';
  const emit = defineEmits();
  function  deleteD(id) {
    emit('deleteD', id)
  }
  
  //
  function edit(id) {
  router.push('/edititem/' + id);
  
}
  
  </script>
  
  <style >
  el-table-column{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>